<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="left" @click="goBack">
        <image class="back-icon" src="/static/back-icon.png"></image>
      </view>
      <text class="nav-title">设备列表</text>
    </view>
    
    <!-- 筛选菜单 -->
    <view class="filter-menu">
      <view class="filter-item" :class="{ 'active': activeFilter === 'project' }" @click="toggleFilter('project')">
        <text class="filter-text">项目</text>
        <image :src="activeFilter === 'project' ? '/static/arrow-up.png' : '/static/arrow-down.png'" class="arrow-icon"></image>
      </view>
      <view class="filter-item" :class="{ 'active': activeFilter === 'contract' }" @click="toggleFilter('contract')">
        <text class="filter-text">合同</text>
        <image :src="activeFilter === 'contract' ? '/static/arrow-up.png' : '/static/arrow-down.png'" class="arrow-icon"></image>
      </view>
      <view class="filter-item" :class="{ 'active': activeFilter === 'category' }" @click="toggleFilter('category')">
        <text class="filter-text">设备类别</text>
        <image :src="activeFilter === 'category' ? '/static/arrow-up.png' : '/static/arrow-down.png'" class="arrow-icon"></image>
      </view>
      <view class="filter-item" :class="{ 'active': activeFilter === 'status' }" @click="toggleFilter('status')">
        <text class="filter-text">状态</text>
        <image :src="activeFilter === 'status' ? '/static/arrow-up.png' : '/static/arrow-down.png'" class="arrow-icon"></image>
      </view>
    </view>
    
    <!-- 筛选下拉区域 -->
    <view v-if="activeFilter" class="filter-container">
      <view class="filter-dropdown">
        <view v-if="activeFilter === 'project'" class="dropdown-content">
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.project === '全部项目' }" @click="selectFilter('project', '全部项目')">
            <text>全部项目</text>
            <text v-if="selectedFilters.project === '全部项目'" class="selected-icon">✓</text>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.project === '项目一' }" @click="selectFilter('project', '项目一')">
            <text>项目一</text>
            <text v-if="selectedFilters.project === '项目一'" class="selected-icon">✓</text>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.project === '项目二' }" @click="selectFilter('project', '项目二')">
            <text>项目二</text>
            <text v-if="selectedFilters.project === '项目二'" class="selected-icon">✓</text>
          </view>
        </view>
        
        <view v-if="activeFilter === 'contract'" class="dropdown-content">
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.contract === '全部合同' }" @click="selectFilter('contract', '全部合同')">
            <text>全部合同</text>
            <text v-if="selectedFilters.contract === '全部合同'" class="selected-icon">✓</text>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.contract === '合同一' }" @click="selectFilter('contract', '合同一')">
            <text>合同一</text>
            <text v-if="selectedFilters.contract === '合同一'" class="selected-icon">✓</text>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.contract === '合同二' }" @click="selectFilter('contract', '合同二')">
            <text>合同二</text>
            <text v-if="selectedFilters.contract === '合同二'" class="selected-icon">✓</text>
          </view>
        </view>
        
        <view v-if="activeFilter === 'category'" class="dropdown-content">
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.category === '全部类别' }" @click="selectFilter('category', '全部类别')">
            <text>全部类别</text>
            <text v-if="selectedFilters.category === '全部类别'" class="selected-icon">✓</text>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.category === '挖掘机' }" @click="selectFilter('category', '挖掘机')">
            <text>挖掘机</text>
            <text v-if="selectedFilters.category === '挖掘机'" class="selected-icon">✓</text>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.category === '装载机' }" @click="selectFilter('category', '装载机')">
            <text>装载机</text>
            <text v-if="selectedFilters.category === '装载机'" class="selected-icon">✓</text>
          </view>
        </view>
        
        <view v-if="activeFilter === 'status'" class="dropdown-content">
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.status === '全部' }" @click="selectFilter('status', '全部')">
            <text>全部</text>
            <text v-if="selectedFilters.status === '全部'" class="selected-icon">✓</text>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.status === '已出场' }" @click="selectFilter('status', '已出场')">
            <text>已出场</text>
            <text v-if="selectedFilters.status === '已出场'" class="selected-icon">✓</text>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.status === '未出场' }" @click="selectFilter('status', '未出场')">
            <text>未出场</text>
            <text v-if="selectedFilters.status === '未出场'" class="selected-icon">✓</text>
          </view>
        </view>
      </view>
      <!-- 添加遮罩层 -->
      <view class="mask-overlay" @click="closeFilter"></view>
    </view>
    
    <!-- 设备列表 -->
    <scroll-view class="list-container" scroll-y>
      <view class="equipment-list">
        <view class="equipment-item" v-for="(item, index) in equipmentList" :key="index" @click="goToDetail(item)">
          <view class="item-header">
            <view class="left-section">
              <text class="equipment-title">{{ item.name }}</text>
              <text class="equipment-id">{{ item.id }}</text>
            </view>
            <view class="status-tag" :class="item.status.type">
              <text class="status-text">{{ item.status.text }}</text>
            </view>
          </view>
          
          <image class="equipment-image" :src="item.image" mode="aspectFill"></image>
          
          <view class="info-section">
            <!-- 位置信息 -->
            <view class="info-row">
              <view class="info-icon-container">
                <image class="info-icon" src="/static/sb_dw.png"></image>
              </view>
              <text class="info-text">{{ item.location }} | {{ item.speed }}</text>
              <view class="info-icon-container align-right">
                <image class="circle-icon" src="/static/refresh-icon.png"></image>
              </view>
            </view>
            
            <!-- 时间信息 -->
            <view class="info-row">
              <view class="info-icon-container">
                <image class="info-icon" src="/static/sb_time.png"></image>
              </view>
              <text class="info-text">{{ item.time }} {{ item.action }} | 已行驶 {{ item.duration }}</text>
            </view>
            
            <!-- 司机信息 -->
            <view class="info-row">
              <view class="info-icon-container">
                <image class="info-icon" src="/static/sb_sj.png"></image>
              </view>
              <text class="info-text">{{ item.driver }} | {{ item.phone }}</text>
            </view>
          </view>
          
          <!-- 操作按钮 -->
          <view class="action-buttons">
            <button class="action-btn fuel-btn">扫码加油</button>
            <button class="action-btn" :class="item.status.type === 'out' ? 'in-btn' : 'out-btn'">
              {{ item.status.type === 'out' ? '入场' : '出场' }}
            </button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      equipmentList: [
        {
          name: '小松挖掘机',
          id: 'BH-001',
          status: { type: 'out', text: '已出场' },
          image: '/static/sb_image1.png',
          location: '陕西省西安市长安区沣东大道',
          speed: '34Km/h',
          time: '2024-05-01 14:25:36',
          action: '离场',
          duration: '1h34min',
          driver: '张三',
          phone: '130 2225 1564'
        },
        {
          name: '小松挖掘机',
          id: 'BH-001',
          status: { type: 'in', text: '未出场' },
          image: '/static/sb_image2.png',
          location: '陕西省西安市长安区沣东大道',
          speed: '0Km/h',
          time: 'XXXX-XX-XX XX:XX:XX',
          action: '离场',
          duration: '0h0min',
          driver: 'XXX',
          phone: 'XXX XXXX XXXX'
        },
        {
          name: '小松挖掘机',
          id: 'BH-001',
          status: { type: 'out', text: '已出场' },
          image: '/static/sb_image1.png',
          location: '陕西省西安市长安区沣东大道',
          speed: '34Km/h',
          time: '2024-05-01 14:25:36',
          action: '离场',
          duration: '1h34min',
          driver: '张三',
          phone: '130 2225 1564'
        }
      ],
      activeFilter: null,
      selectedFilters: {
        project: '全部项目',
        contract: '全部合同',
        category: '全部类别',
        status: '全部'
      }
    }
  },
  methods: {
    goBack() {
      uni.switchTab({
        url: '/pages/equipment/index'
      });
    },
    goToDetail(item) {
      uni.navigateTo({
        url: '/pages/equipment/detail/index?id=' + item.id
      });
    },
    toggleFilter(filter) {
      this.activeFilter = this.activeFilter === filter ? null : filter;
    },
    selectFilter(filter, value) {
      this.selectedFilters[filter] = value;
      this.activeFilter = null;
    },
    closeFilter() {
      this.activeFilter = null;
    }
  }
}
</script>

<style>
/* 移除页面加载后的伪元素 */
:root uni-page-body::after {
  display: none !important;
}

.container {
  flex: 1;
  background-color: #E6EAF3;
}

.nav-bar {
  height: 88px;
  background: linear-gradient(103deg, #4980FF -4%, #2B6BFF 99%);
  padding-top: 44px;
  padding-left: 15px;
  padding-right: 15px;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.left {
  position: absolute;
  left: 15px;
  height: 24px;
  width: 24px;
  justify-content: center;
  align-items: center;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.nav-title {
  font-size: 18px;
  color: #FFFFFF;
  font-weight: 500;
  margin-left: 24px;
}

.filter-menu {
  height: 53px;
  background-color: #FFFFFF;
  border-bottom-width: 1px;
  border-bottom-color: #EEF2F9;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.filter-item {
  flex-direction: row;
  align-items: center;
}

.filter-text {
  font-size: 16px;
  color: #1D2129;
  margin-right: 5px;
}

.arrow-icon {
  width: 7.35px;
  height: 4.82px;
}

.list-container {
  flex: 1;
  padding: 6px 12px 0px;
}

.equipment-list {
  flex-direction: column;
  align-items: center;
}

.equipment-item {
  width: 347px;
  height: 333px;
  background-color: #FFFFFF;
  border-radius: 16px;
  margin-bottom: 12px;
  padding: 12px 8px 58px 24px;
  box-sizing: border-box;
  position: relative;
}

.item-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.left-section {
  flex-direction: row;
  align-items: center;
}

.equipment-title {
  font-size: 18px;
  color: #242731;
  font-weight: bold;
  margin-right: 12px;
}

.equipment-id {
  font-size: 16px;
  color: #72767C;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
}

.out {
  background-color: #FFECE8;
}

.in {
  background-color: #E8FFEA;
}

.status-text {
  font-size: 12px;
}

.out .status-text {
  color: #F53F3F;
}

.in .status-text {
  color: #39C75A;
}

.equipment-image {
  width: 211px;
  height: 139px;
  align-self: center;
  margin-bottom: 14px;
}

.info-section {
  width: 315px;
  align-self: center;
}

.info-row {
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
  width: 315px;
  height: 24px;
}

.info-icon-container {
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
  margin-right: 4px;
}

.align-right {
  position: absolute;
  right: 8px;
}

.info-icon, .circle-icon {
  width: 16px;
  height: 16px;
}

.info-text {
  font-size: 12px;
  color: #72767C;
}

.action-buttons {
  flex-direction: row;
  justify-content: flex-end;
  border-width: 0;
  box-shadow: none;
}

.action-btn {
  height: 36px;
  border-radius: 18px;
  font-size: 15px;
  margin-left: 10px;
  padding: 0 16px;
  background-color: transparent;
  border-width: 0;
  box-shadow: none;
}

button::after {
  border: none !important;
  outline: none !important;
}

.fuel-btn {
  color: #165DFF;
  background-color: #EFF3FF;
}

.out-btn {
  color: #39C75A;
  background-color: #E8FFEA;
}

.in-btn {
  color: #F53F3F;
  background-color: #FFECE8;
}

.filter-item.active .filter-text {
  color: #4980FF;
}

.filter-container {
  position: absolute;
  top: 141px; /* 导航栏高度88px + 筛选条件高度53px */
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.filter-dropdown {
  width: 100%;
  background-color: #FFFFFF;
  z-index: 11;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 0;
  transform: none;
  max-width: none;
  border-radius: 0;
}

.mask-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 10;
}

.dropdown-content {
  padding: 10px 0;
  max-height: 300px;
}

.dropdown-item {
  height: 44px;
  padding: 0 15px;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.dropdown-item text {
  font-size: 14px;
  color: #333333;
}

.dropdown-item.selected {
  background-color: #F5F7FA;
}

.dropdown-item.selected text {
  color: #4980FF;
}

.selected-icon {
  color: #4980FF;
  font-size: 16px;
}
</style> 